<script setup>

/**
 * @import pinia stores
 */

// pinia -> useShoppingPageStore
import { useShoppingPageStore } from '@/stores/shopping/shoppingPage.js'

/**
 * @function goodsTypeBarClick 商品类型栏目点击
 */
const { goodsTypeBarClick } = useShoppingPageStore()

/**
 * props
 */
const props = defineProps({
    list: {
        type: Array,
        default: []
    }
})

const goodsTypeBarClickEvent = (id) => {

    // 参数校验有效性
    if (id === undefined) {
        console.error('id is undefined')
        return
    }

    if (typeof id !== 'number') {
        console.error('id must be a number')
        return
    }

    goodsTypeBarClick(id)
}

</script>

<template>
    <div>
        <ul class="goods-type-list">
            <li class="goods-type-item" v-for="item in list" @click.stop="goodsTypeBarClickEvent(item.id)" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
</template>

<style scoped>
.goods-type-list {
    padding-top: 36rpx;
    display: flex;
    justify-content: space-between;
    width: 660rpx;
    margin: 0 auto;
}

.goods-type-item {
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 12rpx;
    border: #ce852f 4rpx solid;
    padding: 2rpx 25rpx;
    font-size: 23rpx;
    color: #ce852f;
}
</style>